<template>
    <div class="p-5 bg-white rounded" v-if="isload">

        <div class="text-center">
            <div class="text-xl px-2">销售单查看</div>
        </div>
        <div>
            
            <div class="flex justify-between px-3">
                <div class="flex items-center space-x-2">
                    <div>操作员：</div>
                    <div>{{ res.admin.truename }}</div>
                </div>
                <div class="flex items-center space-x-2">
                    <div>录入时间：</div>
                    <div>{{ res.create_time }}</div>
                    <div class="pl-5">单号：</div>
                    <div>{{ res.ordersn }}</div>
                </div>
            </div>
            <div>
                <table class="yp-table-p-2">
                    <thead>
                        <tr>
                            <th class="text-center w-20">序号</th>
                            <th class="w-32">图片</th>
                            <th>名称</th>
                            <th>销售价</th>
                            <th>门店数量</th>
                            <th>大公馆数量</th>
                            <th>备注</th>
                        </tr>
                    </thead>
                    <tbody>
                        <template v-for="(item,index) in res.bill">
                            <tr>
                                <td class="text-center">{{ index+1 }}</td>
                                <td>
                                    <img :src="item.thumbFile" class="w-28 h-28 object-cover" v-viewer>
                                </td>
                                <td class="space-y-2">
                                    <div>{{ item.title }}</div>
                                    <div>{{ item.code }}</div>
                                </td>
                                <td>
                                    ￥{{ item.sellprice }}
                                </td>
                                <td>
                                    {{ item.decStockB }}
                                </td>
                                <td>
                                    {{ item.decStockA }}
                                </td>
                                <td>
                                    {{ item.intro }}
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="py-3 space-y-2">
            <div class="font-bold">
                合计：
            </div>
            <div class="flex space-x-2">
                <div>商品数量：</div>
                <div> <span>{{ countOrder.total }}</span> 件</div>
            </div>
            <div class="flex space-x-2">
                <div>商品金额：</div>
                <div>￥<span>{{ countOrder.price }}</span></div>
            </div>
            <div class="flex space-x-2 items-center">
                <div>实收金额：</div>
                <div>
                    ￥<span>{{ res.receiveprice }}</span>
                </div>
            </div>

        </div>

        <div class="py-2 space-x-2 mt-3 text-center">
            <button class="btn btn-chen" type="button" @click="goback">
                返回
            </button>

        </div>
    </div>
</template>

<script setup>
    import {getData,confirms,Download,alter} from '@/api/data'
    import {ref,reactive,onMounted,computed} from 'vue'
    
    const props=defineProps({
        type:{
            default:1
        },
        id:{
            default:0
        }
    })
    const emits=defineEmits(['jumpCom'])
    const isload=ref(false)
    const res=reactive({})
    const printData=reactive([])
    const read=async(id)=>{
        const resp= await getData('order/read',{id:id})
        if(resp.code==1){
            for(let k in resp.data){
                res[k]=resp.data[k]
            }

            res.bill.map((item,index)=>{
                printData.push({'id':item.goods_id,'numbers':item.numbers})
            })
        }
    }
    const goback=()=>{
        emits('jumpCom',{to:'list'})
    }

    const countOrder=computed(()=>{
        let countObj={
            total:0,
            price:0.00
        }
        res.bill.forEach((item,k)=>{
            if(item.decStockA){
                countObj.total+=item.decStockA*1
                countObj.price+=item.decStockA*item.sellprice
            }
            if(item.decStockB){
                countObj.total+=item.decStockB*1
                countObj.price+=item.decStockB*item.sellprice
            }
        })
        return countObj
    })

    onMounted(async () => {
        if(props.id){
           await read(props.id)
        }
        
        isload.value=true

    })

</script>